<template>
  <BasicDrawer
    v-bind="$attrs"
    :closable="false"
    @register="registerDrawer"
    isDetail
    :wrapClassName="prefixCls"
    :destroyOnClose="true"
    :showFooter="false"
    :showDetailBack="false"
    :title="getTitle"
    :headerStyle="{
      display: 'none',
    }"
  >
    <PageWrapper dense contentFullHeight class="container-page">
      <div class="h-full" v-if="Comp && !loading">
        <template v-if="Comp === 'ComplexPage'">
          <component
            :preview="false"
            isUpdate
            detail
            :is="componentMap[Comp]"
            v-model:active="activePage"
            :pageType="pageInfo.pageType"
            :dataSource="pageInfo.modelList"
            :buttons="pageInfo.buttons"
            :record="modalParams.record"
            :moduleId="modalParams.moduleId"
          />
        </template>
        <component
          v-else
          :is="componentMap[Comp]"
          :modalParams="modalParams"
          :params="modalParams.params"
          :record="modalParams.record"
          :modelId="modalParams.modelId"
          :moduleId="modalParams.moduleId"
        />
      </div>
      <Spin :spinning="loading" wrapper-class-name="h-full" v-else>
        <div class="empty h-full flex pt-20vh justify-center items-center">
          <HEmpty />
        </div>
      </Spin>
      <template #rightFooter>
        <a-button @click="handleClose">返回</a-button>
      </template>
    </PageWrapper>
    <!-- <div class="table-info-bottom">
          <a-button @click="handleClose">返回</a-button>
        </div> -->
  </BasicDrawer>
</template>

<script lang="ts" setup name="table-info">
  import { ref, computed } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { MODEL_TYPE, getCompositeInfoApi } from '/@/api/config-center/model-design';
  import { PageWrapper } from '/@/components/Page';
  import HEmpty from '/@/components/HEmpty/index.vue';

  import { Spin } from 'ant-design-vue';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  import { PageTypeEnum } from '/@/components/HComplexPage/typing';
  import { useDesign } from '/@/hooks/web/useDesign';
  const { prefixCls } = useDesign('table-info');
  const Comp = ref('');

  const componentMap = {
    BasicModelTable: createAsyncComponent(() => import('/@/components/ModelTable/src/index.vue'), {
      loading: true,
    }),
    ComModelFormPage: createAsyncComponent(
      () => import('/@/components/HComplexPage/components/ComModelFormPage.vue'),
      { loading: true },
    ),
    ComplexPage: createAsyncComponent(() => import('/@/components/HComplexPage/index.vue'), {
      loading: true,
    }),
    ZKRQprojectManagement: createAsyncComponent(
      () => import('/@/views/zkrq/project-management/index.vue'),
      { loading: true },
    ),
  };

  const modalParams = ref<any>({});
  const activePage = ref(0);

  const pageInfo = ref<Indexable>({
    pageType: PageTypeEnum.TILED,
    modelList: [],
  });
  const loading = ref(true);

  const [registerDrawer, { closeDrawer }] = useDrawerInner(async (data) => {
    loading.value = true;

    const {
      componentName,
      dataModelId: modelId,
      moduleId,
      modelClassify,
      record,
      params,
      label: title,
      dynamicParams,
    } = data;
    console.log(
      '%cdata===>76： ',
      'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
      data,
    );

    if (componentName) {
      Comp.value = componentName;
    } else {
      switch (Number(modelClassify)) {
        case MODEL_TYPE.LIST:
          Comp.value = 'BasicModelTable';
          break;
        case MODEL_TYPE.FORM:
          Comp.value = 'ComModelFormPage';
          break;
        case MODEL_TYPE.COMPLEX:
          await getCompositeData({ moduleId, modelId });
          Comp.value = 'ComplexPage';
          break;
        default:
          break;
      }
    }

    modalParams.value = {
      moduleId,
      modelId,
      dynamicParams,
      preview: false,
      isUpdate: true,
      params,
      record,
      title,
    };

    loading.value = false;
  });
  async function getCompositeData({ modelId, moduleId }) {
    const data = await getCompositeInfoApi({ modelId, moduleId });

    const ret = data.compositeDesignInfo || {};
    pageInfo.value = ret;
  }
  const getTitle = computed(() => modalParams.value.title || '详情');
  function handleClose() {
    modalParams.value = {};
    Comp.value = '';
    loading.value = true;
    closeDrawer();
  }
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-table-info';

  .@{prefix-cls}{
    .container-page{
      padding-bottom: 45px;
    }
  }

  // .table-info-bottom {
  //   position: absolute;
  //   right: 0;
  //   bottom: 0;
  //   width: 100%;
  //   border-top: 1px solid #e9e9e9;
  //   padding: 10px 16px;
  //   background: #fff;
  //   text-align: right;
  //   z-index: 1;
  // }
</style>
